import React from "react"
import { useRef } from "react";
import "./index.css"

const Addlive = (props) => {


    const btngoto = () => {
        props.history.go(-1)

    }

    let video_ref = useRef();

    async function btnkai() {
        let video = video_ref.current;
        let constraints = {
            video: { width: "100%", height: "100%" },
            audio: true,
        };
        try {
            let MediaStream = await navigator.mediaDevices.getUserMedia(constraints);
            video.srcObject = MediaStream;
            video.play();
        } catch (e) {
            alert(e);
        }
    }

    async function btnguan() {
        let video = video_ref.current;
        let constraints = {
            video: { width: "100%", height: "100%" },
            audio: false,
        };
        try {
            let MediaStream = await navigator.mediaDevices.getUserMedia(constraints);
            console.log(MediaStream, "asd")
            video.srcObject = MediaStream;
            video.pause();
        } catch (e) {
            alert(e);
        }

        // navigator.getUserMedia({ video: true, audio: true }, function (stream) {
        //     video.src = window.URL.createObjectURL(stream);
        //     stream.stop();
        //     }, function (e) {
        //         console.log('Fine, you get a movie instead of your beautiful face ;)');
        //     }
        // );

        // localMediaStream.stop()
        // video.src = "";
        // .getTracks()[0]
    }

    return <div className="bigbox">
        <div id="contents" className="contents">
            <video
                ref={video_ref}
                width="100%"
                height="100%"
                autoPlay={true}
            ></video>
        </div>

        <div className="contents2">
            <div className="but0" onClick={() => { btngoto() }}>返回</div>
            <div className="but1" onClick={() => { btnkai() }}>开启摄像头</div>
            <div className="but2" onClick={() => { btnguan() }}>关闭摄像头</div>
        </div>
    </div>
}

export default Addlive